<template>
  <my-container>
    <!--查询-->
    <template #header>
      <el-form class="ad-form-query" :inline="true" @submit.native.prevent>
        <el-form-item v-if="checkPermission(['admin_codegenerator_createcode'])">
          <el-button type="primary" icon="el-icon-download" @click="onCreatCode">生成代码</el-button>
        </el-form-item>
      </el-form>
    </template>

    <!--列表-->
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      highlight-current-row
      :header-cell-style="{background:'#f9f9f9'}"
      @selection-change="selsChange"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column type="index" width="80" label="#" />

      <el-table-column prop="tableName" label="表名" width />
      <el-table-column prop="tableConmment" label="表说明" width />

      <el-table-column v-if="checkPermission(['admin_codegenerator_querytablecolumn'])" label="操作" width="180">
        <template #default="{ row }">
          <el-button type="primary" icon="el-icon-search" @click="onShow(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--列信息-->
    <el-dialog :visible.sync="colVisible" :title="dialogName" width="50%">
      <el-table :data="cols" border>
        <el-table-column property="colName" label="列名" width="150" />
        <el-table-column property="isPrimaryKey" label="主键" width="100">
          <template #default="{ row }">
            <span v-if="row.isPrimaryKey">★</span>
            <span v-if="!row.isPrimaryKey">☆</span>
          </template>
        </el-table-column>
        <el-table-column property="columnType" label="数据类型" width="100" />
        <el-table-column property="columnLength" label="长度" width="100" />
        <el-table-column property="isNullable" label="允许NULL" width="100">
          <template #default="{ row }">
            <el-tag v-if="row.isNullable" type="success" effect="dark" size="small">Yes</el-tag>
            <el-tag v-if="!row.isNullable" type="danger" effect="dark" size="small">No</el-tag>
          </template>
        </el-table-column>
        <el-table-column property="defaultValue" label="默认值" width="100" />

        <el-table-column property="comment" label="说明" width="150" />
      </el-table>
    </el-dialog>

  </my-container>
</template>

<script>
import axios from 'axios'
import store from '@/store'
import { getList, getTableColumn } from '@/api/admin/codeGenerator'
import MyContainer from '@/components/my-container'
export default {
  name: 'Roles',
  components: { MyContainer },
  data() {
    return {
      dialogName: '列信息',
      list: [],
      cols: [],
      sels: [], // 列表选中列
      tableName: '',
      colVisible: false,
      listLoading: false
    }
  },
  mounted() {
    this.getList()
  },
  beforeUpdate() {
  },
  methods: {
    // 生成代码
    async onCreatCode() {
      const token = store.getters.token
      const para = { tableNames: [] }
      para.tableNames = this.sels.map(s => {
        return s.tableName
      })
      if (para.tableNames.length < 1) {
        this.$message({
          message: '请先选择数据表',
          type: 'error'
        })
        return
      }
      axios({
        method: 'post',
        url: `${process.env.VUE_APP_BASE_API}/admin/codeGenerator/CreateCode`,
        data: para.tableNames,
        responseType: 'blob',
        headers: { 'Authorization': 'Bearer ' + token }
      })
        .then(res => {
          // console.log('response: ', res)
          // new Blob([data])用来创建URL的file对象或者blob对象
          const url = window.URL.createObjectURL(new Blob([res.data]))
          // 生成一个a标签
          const link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          // 生成时间戳
          const timestamp = new Date().getTime()
          link.download = timestamp + '.zip'
          document.body.appendChild(link)
          link.click()
        })
        .catch(error => {
          console.log('response: ', error)
        })
    },
    // 获取数据表列表
    async getList() {
      this.listLoading = true
      const res = await getList()
      this.listLoading = false
      if (!res?.success) {
        return
      }

      const data = res.data
      data.forEach(d => {
        d._loading = false
      })
      this.list = data
    },
    // 查看
    async onShow(row) {
      this.colVisible = true
      this.tableName = row.tableName
      this.dialogName = '【' + row.tableName + '】'
      this.getColList()
    },
    async getColList() {
      const params = {

        tableName: this.tableName
      }
      const res = await getTableColumn(params)
      this.listLoading = false
      if (!res?.success) {
        return
      }

      this.cols = res.data
    },
    selsChange: function(sels) {
      this.sels = sels
    }
  }
}
</script>
